<!--
 * @Description: 组织商品管理
 * @version: 电子名片2.0
 * @Author: 尹鑫
 * @Date: 2020-12-02 09:31:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-13 14:11:34
-->
<template>
  <div class="mainbox">
    <adminTable 
     ref="refTable" 
    :form-inline="formInline" 
    :api-fun="commodityList" 
    :table-column="tableColumn" 
    :table-data.sync="tableData">
      <!-- 搜索插槽 -->
      <template slot="search">
        <el-form-item>
          <el-input v-model="formInline.keyword" placeholder="组织商品编号、商品名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.productStatus" placeholder="状态">
            <el-option v-for="(item, index) in stateList" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </template>
      <!-- 组织类型插槽 -->
      <template slot="companyType" slot-scope="scope">
        <span v-if="scope.value.companyType === '0'">企业</span>
        <span v-else-if="scope.value.companyType === '1'">政府事业单位</span>
        <span v-else-if="scope.value.companyType === '2'">个人工商户</span>
        <span v-else>其他组织</span>
      </template>
      <!-- 状态插槽 -->
      <template slot="productStatus" slot-scope="scope">
        <span v-if="scope.value.productStatus === '0'" style="color: #F56C6C">待审核</span>
        <span v-else-if="scope.value.productStatus === '1'" style="color: #67C23A">已同意</span>
        <span v-else-if="scope.value.productStatus === '3'" style="color: #67C23A">待整改</span>
        <span v-else style="color: #909399;">已拒绝</span>
      </template>
      <!-- 操作插槽 -->
      <template slot="operat" slot-scope="scope">
        <el-button v-if="scope.value.productStatus === '0'" type="text" size="small" @click="handleClick(scope.value)">审核</el-button>
        <el-button type="text" size="small" @click="showDetail(scope.value)">商品详情</el-button>
      </template>
    </adminTable>
    <MessageBox ref="openMessagebox" :title="'组织商品审核'" :content="'审核同意后，该商品在用户端可见，是否同意？'" :confirm-text="'同意'" :cancel-text="'拒绝'" @confirm="confirmMessage" @cancel="cancelModal" />
    <RejectModal :title="'组织商品审核'" :reason.sync="rejectReason" :show-reject-modal.sync="showRejectModal" @confire="submitReason" />
    <ProductDetailsModal :title="'组织商品详情'" :show-details-modal.sync="showDetailsModal" :product-details="productDetails" />
  </div>
</template>

<script>
import MessageBox from '@/components/MessageBox'
import RejectModal from '@/views/report/components/RejectModal'
import adminTable from '@/components/admin/admin-table'
import ProductDetailsModal from './components/ProductDetailsModal'
// 导入接口函数
import { commodityList, commodityDetail, commodityCheck } from '@/api/commodity'
// 导入表格配置
import { tableColumn, stateList } from './listConfig'
export default {
  components: {
    adminTable,
    MessageBox,
    RejectModal,
    ProductDetailsModal
  },
  data() {
    return {
      tableColumn,
      tableData: [],
      formInline: {
        keyword: '',
        productStatus: ''
      },
      rejectReason: '',
      stateList,
      // 接口函数
      commodityList,
      showRejectModal: false,
      showDetailsModal: false,
      productDetails: {},
      // 选中行商品id
      goodId: ''
    }
  },
  methods: {
    // 审核操作
    handleClick(value) {
      this.$refs.openMessagebox.open(value)
    },
    // 同意审核接口请求
    async confirmMessage(v) {
      const { code } = await commodityCheck({
        id: v.productId,
        operation: true,
        reason: ''
      })
      if (code === 0) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$refs.refTable.getList()
      } else {
        this.$message.error('操作失败')
      }
    },
    cancelModal(e, action) {
      // 当动作为拒绝时才打开另外一个模态框
      if (action === 'cancel') {
        this.goodId = e.productId
        this.showRejectModal = true
      }
    },
    // 提交拒绝理由
    async submitReason(e) {
      const { code } = await commodityCheck({
        id: this.goodId,
        operation: false,
        reason: e
      })
      if (code === 0) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$refs.refTable.getList()
      } else {
        this.$message.error('操作失败')
      }
    },
    // 显示商品详情模态框
    async showDetail(v) {
      const { data } = await commodityDetail(v)
      if (data) {
        data.productUrl = data.productUrl.split(',').filter(item => item)
        this.productDetails = data
        this.showDetailsModal = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
